<template>
  <div>
    <table border="1" width="80%">
      <thead>
      <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>生日</th>
        <th>电话</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody v-for="stu in stuObj.records" :key="stu.id">
      <tr>
        <td>{{ stu.id }}</td>
        <td>{{ stu.name }}</td>
        <td>{{ stu.birthday }}</td>
        <td>{{ stu.phone }}</td>
        <td><input type="button" value="删除" @click="del(stu.id)">
          <input type="button" value="更新" @click="findById(stu.id)"></td>
      </tr>
      </tbody>
    </table>

    <div>
      <a style="margin-left:10px" v-for="p in stuObj.pages" :key="p" @click="findByItem(p)">{{ p }}</a>
      <input type="button" value="添加" @click="addLook=true">
    </div>
    <hr>
    姓名：<input type="text" v-model="paramsObj.name"><br>
    起始生日：<input type="text" v-model="paramsObj.startDate"><br>
    结束生日：<input type="text" v-model="paramsObj.endDate"><br>
    <input type="button" value="查询" @click="findByItem(1)">

    <div class="dialog" v-if="addLook">
      <div class="content">
        姓名：<input type="text" v-model="addObj.name"><br>
        生日：<input type="text" v-model="addObj.birthday"><br>
        电话：<input type="text" v-model="addObj.phone"><br>
        <input type="button" value="添加" @click="add()">
      </div>
    </div>

    <div class="dialog" v-if="updateLook">
      <div class="content">
        姓名：{{ updateObj.name }}<br>
        生日：{{ updateObj.birthday }}<br>
        电话：<input type="text" v-model="updateObj.phone"><br>
        <input type="button" value="修改" @click="update()">
      </div>
    </div>

  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      stuObj: {},
      paramsObj: {},
      addLook: false,
      addObj: {},
      updateLook: false,
      updateObj: {},
    }
  },
  created() {
    this.findByItem(1);
  },
  methods: {
    findByItem(pageNO) {
      this.paramsObj.pageNO = pageNO;
      axios.get("/project/student/findByItem", {params: this.paramsObj})
          .then(resp => {
            this.stuObj = resp.data;
          })
    },

    add() {
      axios.get("/project/student/add", {params: this.addObj}).then(resp => {
        if (resp.data == "ok") {
          this.addLook = false;
          this.findByItem(1);
          this.addObj = {};
        }
      })
    },

    del(id) {
      axios.get("/project/student/del", {params: {id}}).then(resp => {
        if (resp.data == "ok") {
          this.findByItem(1);
        }
      })
    },

    findById(id) {
      axios.get("/project/student/findById", {params: {id}}).then(resp => {
        this.updateLook = true;
        this.updateObj = resp.data;
        this.findByItem(1);
      })
    },

    update() {
      axios.get("/project/student/update", {params: this.updateObj}).then(resp => {
        if (resp.data == "ok") {
          this.updateLook = false;
          this.findByItem(1);
        }
      })
    },

  }
}

</script>

<style scoped>
.dialog {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: rgba(255, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-content: center;
}

.content {
  width: 500px;
  height: 500px;
  background-color: white;
  border: 2px solid black;
}
</style>